<template>
  <div style="margin:16px auto; max-width: 1080px; padding: 0 12px;">
    <a-card title="权限管理">
      <template #extra>
        <a-space>
          <a-input v-model:value="keyword" placeholder="按编码/名称/路径筛选" style="width: 260px" />
          <a-button type="primary" @click="load">查询</a-button>
          <a-button v-if="hasPerm('permission:manage')" type="primary" @click="openEdit()">新建</a-button>
        </a-space>
      </template>
      <a-table :data-source="perms" :columns="columns" row-key="id" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key==='actions'">
            <a v-if="hasPerm('permission:manage')" @click="openEdit(record)">编辑</a>
            <a-divider type="vertical" v-if="hasPerm('permission:manage')" />
            <a-popconfirm v-if="hasPerm('permission:manage')" title="确认删除该权限？" @confirm="() => onDelete(record.id)"><a>删除</a></a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:open="editOpen" :title="editForm.id ? '编辑权限' : '新建权限'" @ok="onSave" ok-text="保存" cancel-text="取消">
      <a-form :model="editForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-form-item label="编码"><a-input v-model:value="editForm.code" :disabled="!!editForm.id" /></a-form-item>
        <a-form-item label="名称"><a-input v-model:value="editForm.name" /></a-form-item>
        <a-form-item label="类型"><a-select v-model:value="editForm.type" :options="[{label:'API', value:'API'},{label:'MENU', value:'MENU'}]" /></a-form-item>
        <a-form-item label="方法"><a-input v-model:value="editForm.method" placeholder="GET/POST/PUT/DELETE" /></a-form-item>
        <a-form-item label="路径"><a-input v-model:value="editForm.path" /></a-form-item>
        <a-form-item label="描述"><a-input v-model:value="editForm.description" /></a-form-item>
        <a-form-item label="状态"><a-switch v-model:checked="statusOn" /></a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'
import { listPermissions, createPermission, updatePermission, deletePermission, type PermissionVO } from '@/api/admin/modules/system'
import { usePerm } from '@/composables/usePerm'

const keyword = ref('')
const perms = ref<PermissionVO[]>([])
const columns = computed(() => [
  { title: 'ID', dataIndex: 'id' },
  { title: '编码', dataIndex: 'code' },
  { title: '名称', dataIndex: 'name' },
  { title: '类型', dataIndex: 'type' },
  { title: '方法', dataIndex: 'method' },
  { title: '路径', dataIndex: 'path' },
  { title: '状态', dataIndex: 'status', customRender: ({ text }: any) => (text === 1 ? '启用' : '禁用') },
  { title: '创建时间', dataIndex: 'createTime' },
  { title: '操作', key: 'actions' }
])

async function load() {
  const resp = await listPermissions(keyword.value || undefined)
  if (resp.code === 0) perms.value = resp.data
}

const editOpen = ref(false)
const editForm = ref<{ id?: number; code: string; name: string; type?: string; method?: string; path?: string; description?: string; status?: number }>({ 
  code: '', 
  name: '', 
  type: 'API', 
  method: '', 
  path: '', 
  description: '', 
  status: 1 
})
const statusOn = computed({ get: () => editForm.value.status === 1, set: (v: boolean) => editForm.value.status = v ? 1 : 0 })
const { hasPerm } = usePerm()

function openEdit(row?: any) {
  if (row) {
    editForm.value = { 
      id: row.id, 
      code: row.code || '', 
      name: row.name || '', 
      type: row.type || 'API', 
      method: row.method || '', 
      path: row.path || '', 
      description: row.description || '', 
      status: row.status ?? 1 
    }
  } else {
    editForm.value = { 
      code: '', 
      name: '', 
      type: 'API', 
      method: '', 
      path: '', 
      description: '', 
      status: 1 
    }
  }
  editOpen.value = true
}

async function onSave() {
  if (!editForm.value.name || !editForm.value.code) { message.warning('请填写编码与名称'); return }
  try {
    if (editForm.value.id) {
      const resp = await updatePermission(editForm.value.id, { name: editForm.value.name, type: editForm.value.type, method: editForm.value.method, path: editForm.value.path, description: editForm.value.description, status: editForm.value.status })
      if (resp.code === 0) { 
        message.success('已保存'); 
        editOpen.value = false; 
        load() 
      } else {
        message.error(resp.message || '保存失败')
      }
    } else {
      const resp = await createPermission(editForm.value)
      if (resp.code === 0) { 
        message.success('已创建'); 
        editOpen.value = false; 
        load() 
      } else {
        message.error(resp.message || '创建失败')
      }
    }
  } catch (error: any) {
    message.error(error.message || '操作失败')
  }
}

async function onDelete(id: number) {
  try {
    const resp = await deletePermission(id)
    if (resp.code === 0) { 
      message.success('已删除'); 
      load() 
    } else {
      message.error(resp.message || '删除失败')
    }
  } catch (error: any) {
    message.error(error.message || '删除失败')
  }
}

load()
</script>


